<template>
  <div class="watch-list">
    <div class="logos">
      <img src alt />
    </div>
    <div class="xinxi">
      <span class="name">火星新闻播报</span>
      <br />
      <span class="time">2019-10-10</span>
    </div>

    <button @click="back" :class="{back:isActive}">{{istext}}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      istext: "取消关注"
    };
  },
  methods: {
    back() {
      this.isActive = true;
      this.istext = "关注";
    }
  }
};
</script>

<style lang="less" scoped>
.watch-list {
  overflow: hidden;
  .logos {
    width: 13.89vw;
    height: 13.89vw;
    border-radius: 50%;
    background: pink;
    float: left;
    margin: 5.56vw 5.56vw 0vw 5.56vw;
  }
  .xinxi {
    float: left;
    margin: 6.94vw 8.33vw 0 0;
  }
  button {
    float: left;
    margin-left: 5.56vw;
    margin-top: 8.33vw;
    width: 27.78vw;
    height: 8.33vw;
    line-height: 8.33vw;
    border: none;
    background: #2878ff;
    color: #fff;
    font-size: 3.89vw;
    border-radius: 4.17vw;
  }
  .back {
    background: #ccc;
  }
}
</style>